<template>
  <div v-if="flag">
    <!-- 筛选车型参数 -->
    <div class='aa-fullScreenPop'>
      <div class='aa-popTitle'>
        <span>请精确筛选车型参数</span>
        <a @click='hidepage'>×</a>
      </div>
      <div class='aa-popCenter'>
        <div class='aa-parameterMain'>
          <!-- 单个参数的筛选 -->
          <div class='aa-singleParameter' v-for="(item, index) in optionAutoParamList" :key="index">
            <template v-if="item.IsImage == true">
              <div class='aa-parameterTop'>
                <div class='aa-parameterName'>
                  <span>{{item.ParamTypeName}}</span>
                </div>
              </div>
              <div class='aa-parameterPicCheck'>
                <div :style="{'width': (item.AutoParamList.length*500/75) + 'rem'}">
                  <div class="aa-singlePicValue" :class="pitem.Selected?'aa-selected':''" v-for="(pitem, idx) in item.AutoParamList" :key="idx" @click.stop='selectAutoParamFn(pitem, item)'>
                    <div class='aa-valueTop'>
                      <div class='aa-check'>
                        <img v-if="pitem.Selected" style="width: 0.5rem; height: 0.5rem;" src="../assets/images/xuanzhong.png" alt="">
                        <img v-else style="width: 0.5rem; height: 0.5rem;" src="../assets/images/xuanzhong-fail.png" alt="">
                      </div>
                      <div class='aa-valueName'>
                        <span>{{pitem.ParamValue}}</span>
                      </div>
                    </div>
                    <div class='aa-picBox'>
                      <img :src="pitem.ParamImage" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="item.IsImage == false">
              <div class='aa-parameterTop'>
                <div class='aa-parameterName'>
                  <span>{{item.ParamTypeName}}</span>
                </div>
                <div class='aa-arrowIcon'>
                  <!-- <wux-icon type="ios-arrow-down" color="#eee" size='20' class="aa-imgicon" @click='shopListshow' /> -->
                </div>
              </div>
              <div class='aa-parameterCheck'>
                <div class='aa-singleValue' :class="pitem.Selected ? 'aa-selected': ''" v-for="(pitem, idx) in item.AutoParamList" :key="idx" @click.stop='selectAutoParamFn(pitem, item)'>
                  <span class="lusir-common_cursor">{{pitem.ParamValue}}</span>
                </div>
              </div>
            </template>

          </div>
        </div>
      </div>
      <div class='aa-popFool'>
        <a class='aa-buttonLeft' @click='hidepage'>取消</a>
        <a class='aa-buttonRight' @click="confirmsubmitorder">确定</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: '',
  data() {
    return {
      flag: false,
      optionAutoParamList: [],
      type: 0,
      ite: {}
    }
  },
  methods: {
    showPopup() {
      this.flag = !this.flag;
    },
    hidepage() {
      this.flag = !this.flag;
    },
    setvalue(data, type, item) {
      if (item.selectData) {
        data.forEach(x => {
          x.AutoParamList.forEach(y => {
            item.selectData.forEach(z => {
              if (y.ParamTypeId == z.pTypeId && y.ParamValueId == z.pValueId) {
                y.Selected = true;
              } else {
                y.Selected = false;
              }
            })
          })
        })
      }
      this.optionAutoParamList = data;

      this.type = type;
      this.ite = item;
    },
    // 选择
    selectAutoParamFn(pitem, item) {
      for (var i = 0; i < this.optionAutoParamList.length; i++) {
        for (var j = 0; j < this.optionAutoParamList[i].AutoParamList.length; j++) {
          this.optionAutoParamList[i].AutoParamList[j].Selected = false;
          if (pitem.ParamValueId == this.optionAutoParamList[i].AutoParamList[j].ParamValueId) {
            this.optionAutoParamList[i].AutoParamList[j].Selected = !this.optionAutoParamList[i].AutoParamList[j].Selected
          }
        }
      }

    },
    //确定
    confirmsubmitorder() {
      var alertlist = [];
      var userParam = [];
      for (var i = 0; i < this.optionAutoParamList.length; i++) {
        var isselected = false;
        for (var j = 0; j < this.optionAutoParamList[i].AutoParamList.length; j++) {
          if (this.optionAutoParamList[i].AutoParamList[j].Selected) {
            isselected = true;
            userParam.push({
              pTypeId: this.optionAutoParamList[i].AutoParamList[j].ParamTypeId,
              pValueId: this.optionAutoParamList[i].AutoParamList[j].ParamValueId,
            });
          }
        }

        if (isselected == false) {
          alertlist.push("请选择" + this.optionAutoParamList[i].ParamTypeName)
        }
      }

      if (alertlist.length > 0) {
        Toast(alertlist[0]);
        return;
      }
      this.$emit('completeChooseParam', {
        userParam: userParam,
        type: this.type,
        ite: this.ite
      })
    }
  }
}
</script>

<style scpoed>
/* 弹层通用样式 */
.aa-fullScreenPop {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 1.28rem 0 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
}
.aa-popTitle {
  width: 100%;
  padding: 0.24rem 0.4rem;
  background: #fff;
  border-bottom: 0.013333333333333334rem solid #e8e8e8;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.aa-popTitle > span {
  width: auto;
  height: 0.8rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  display: block;
  float: left;
  clear: none;
}
.aa-popTitle > a {
  width: 0.8rem;
  margin-right: -0.08rem;
  font-size: 0.64rem;
  line-height: 0.8rem;
  text-align: center;
  color: #e74c3c;
  display: block;
  float: right;
}
.aa-popCenter {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  float: left;
  clear: left;
}
/* 参数筛选 */
.aa-parameterMain {
  width: 100%;
  height: 100%;
  padding-bottom: 1.3333333333333333rem;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-singleParameter {
  width: 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-parameterTop {
  width: 100%;
  padding-top: 0.21333333333333335rem;
  float: left;
  clear: left;
}
.aa-parameterName {
  width: auto;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: left;
  color: #bcbcbc;
  float: left;
  clear: none;
}
.aa-arrowIcon {
  float: right;
  clear: none;
}
.aa-parameterCheck {
  width: 9.386666666666667rem;
  margin-left: -0.18666666666666668rem;
  float: left;
  clear: left;
}
.aa-singleValue {
  width: 2.933333333333333rem;
  height: auto;
  margin: 0.09333333333333334rem 0 0.09333333333333334rem 0.18666666666666668rem;
  background: #f6f6f6;
  border-radius: 0.16rem;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: center;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: stretch;
  float: left;
  clear: none;
}
.aa-singleValue > span {
  width: 2.933333333333333rem;
  height: 1.12rem;
  background: #f6f6f6;
  border-radius: 0.16rem;
  font-size: 0.32rem;
  line-height: 0.56rem;
  text-align: center;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: none;
}
.aa-parameterCheck .aa-selected > span {
  background: #fdf3f3;
  color: #e74c3c;
}
.aa-parameterPicCheck {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  float: left;
  clear: left;
}
.aa-parameterPicCheck > div {
  height: auto;
  margin-left: -0.18666666666666668rem;
  float: left;
  clear: left;
}
.aa-singlePicValue {
  width: 6.4rem;
  height: 5.6rem;
  background: #f6f6f6;
  border-radius: 0.16rem;
  margin: 0 0 0 0.18666666666666668rem;
  padding: 0 0.16rem 0.16rem;
  box-sizing: border-box;
  float: left;
  clear: none;
}
.aa-parameterPicCheck .aa-selected {
  background: #fdf3f3;
}
.aa-valueTop {
  width: 100%;
  height: 0.96rem;
  float: left;
  clear: left;
}
.aa-check {
  width: 0.64rem;
  height: 0.8rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  float: left;
  clear: none;
}
.aa-valueName {
  width: auto;
  height: 0.8rem;
  font-size: 0.37333333333333335rem;
  line-height: 0.8rem;
  text-align: left;
  color: #666;
  float: left;
  clear: none;
}
.aa-parameterPicCheck .aa-selected .aa-valueName {
  color: #e74c3c;
}
.aa-picBox {
  width: 100%;
  height: 4.48rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: left;
}
.aa-picBox image {
  max-width: 100%;
  max-height: 100%;
}
.aa-popFool {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.aa-popFool > a {
  height: 1.3333333333333333rem;
  border-radius: 0;
  border: 0;
  font-size: 0.48rem;
  line-height: 1.3333333333333333rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  clear: none;
}
.aa-popFool > a.aa-buttonLeft {
  width: 34%;
  background: #fff1f0;
  color: #e74c3c;
}
.aa-popFool > a.aa-buttonRight {
  width: 66%;
  background: #e74c3c;
  color: #fff;
}
</style>
